<template>
	<div>
		<TablePlus :columns="columns" :request-api="RequestAccountList" :initParam="initParam" row-key="m_id">
			<template #tableHeader="scope">
				<el-button type="primary" :icon="CirclePlus" size="small" @click="bindAccountAdd">新增用户</el-button>
				<el-button type="primary" :icon="Upload" plain size="small" @click="bindBatchDelete(scope.selectedListIds)"
					>批量删除</el-button
				>
			</template>
			<template #headerimg="{ row }">
				<el-image :src="filterImageUrl(row.headerimg)" :lazy="true"></el-image>
			</template>
			<template #createtime="{ row }">
				<span>{{ dayjs(row.createtime).format('YYYY-MM-DD HH:mm:ss') }}</span>
			</template>
			<template #operation="scope">
				<el-button size="small" :icon="EditPen" @click="bindAccountEdit(scope.row)">编辑</el-button>
				<el-popconfirm
					title="确认删除吗？"
					confirm-button-text="确认"
					cancel-button-text="取消"
					@confirm="bindAccountDelete(scope.row.m_id)"
				>
					<template #reference>
						<el-button size="small" type="danger" :icon="Delete">删除</el-button>
					</template>
				</el-popconfirm>
			</template>
		</TablePlus>

		<!-- 添加账户 1. 弹出添加账户对话框， 2. 对话框内容为自定义表单组件 3. 图片预览，表单文件提交 4. 组件通讯 -->
		<el-dialog :title="type===FormType.ADD?'添加账户':'编辑账户'" v-model="disableAccountAdd" width="40%">
			<!-- <AccountAddDialog v-if="disableAccountAdd" v-model="disableAccountAdd"></AccountAddDialog> -->
			<AccountAddDialog v-if="disableAccountAdd" :type="type" :currentAccount="currentAccount" @close="bidnDialogClose"></AccountAddDialog>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import TablePlus from '@/components/TablePlus/index.vue'
import { api } from '@/api'
import { Delete, EditPen, View, CirclePlus, Upload } from '@element-plus/icons-vue'
import { ElMessage, dayjs } from 'element-plus'
import { filterImageUrl } from '@/utils'
import { FormType } from '@/config/const'
import { IAccountAdd } from '@/utils/types'

const { RequestAccountList, RequestManagerDelete, RequestManagerBatchDelete } = api
const disableAccountAdd = ref<boolean>(false)
const type = ref<string>(FormType.ADD)
const currentAccount = ref<IAccountAdd>()

const columns = [
	{ prop: 'm_id', label: '序号', width: 100 },
	{ prop: 'headerimg', label: '头像', width: 100 },
	{ prop: 'username', label: '用户名', search: { el: 'input' } },
	{ prop: 'nick', label: '昵称' },
	{ prop: 'rolename', label: '角色' },
	{ prop: 'createtime', label: '创建时间' },
	{ prop: 'operation', label: '操作' }
]
const initParam = ref<any>()

/**
 * 删除账户
 * @param id
 */
const bindAccountDelete = async (id: number) => {
	const data = await RequestManagerDelete(id)
	const { resultCode } = data
	if (resultCode === 1) {
		initParam.value = { refreshAuto: Math.random() } // 更新界面
	}
}

/**
 * 批量删除
 */
const bindBatchDelete = async (selectedListIds: string[]) => {
	if (selectedListIds.length <= 0) {
		ElMessage({
			type: 'info',
			message: '请选择删除产品'
		})
		return
	}
	const ids: string = selectedListIds.join(',')
	const data = await RequestManagerBatchDelete(ids)
	const { resultCode } = data
	if (resultCode === 1) {
		ElMessage({
			type: 'success',
			message: '批量删除成功'
		})
		initParam.value = { refreshAuto: Math.random() } // 更新界面
	}
}

/**
 * 添加账户
 */
const bindAccountAdd = () => {
	disableAccountAdd.value = true
	type.value = FormType.ADD
}

/**
 * 编辑账户
 */
const bindAccountEdit = (row:IAccountAdd)=>{
	currentAccount.value = row
	disableAccountAdd.value = true
	type.value = FormType.EDIT
}

// watch(
// 	() => disableAccountAdd.value,
// 	() => {
// 		if (!disableAccountAdd.value) {
// 			initParam.value = { refreshAuto: Math.random() }
// 		}
// 	}
// )
const bidnDialogClose = () => {
	disableAccountAdd.value = false
	initParam.value = { refreshAuto: Math.random() }
}
</script>

<style scoped></style>
